diff options
Diffstat (limited to 'src2/pages/shop/brands/[slug].js')
| -rw-r--r-- | src2/pages/shop/brands/[slug].js | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/src2/pages/shop/brands/[slug].js b/src2/pages/shop/brands/[slug].js new file mode 100644 index 00000000..a387e55d --- /dev/null +++ b/src2/pages/shop/brands/[slug].js @@ -0,0 +1,178 @@ +import axios from "axios"; +import { useEffect, useState } from "react"; +import Filter from "@/components/elements/Filter"; +import Footer from "@/components/layouts/Footer"; +import Header from "@/components/layouts/Header"; +import Layout from "@/components/layouts/Layout"; +import Pagination from "@/components/elements/Pagination"; +import ProductCard from "@/components/products/ProductCard"; +import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug"; +import FilterIcon from "@/icons/filter.svg"; +import apiOdoo from "@/core/utils/apiOdoo"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/pagination"; +import "swiper/css/autoplay"; +import { Pagination as SwiperPagination } from "swiper"; +import Image from "@/components/elements/Image"; +import LineDivider from "@/components/elements/LineDivider"; + +export async function getServerSideProps(context) { + const { + slug, + page = 1, + category = '', + price_from = '', + price_to = '', + order_by = '', + } = context.query; + + let urlParameter = [ + 'q=*', + `page=${page}`, + `brand=${getNameFromSlug(slug)}`, + `category=${category}`, + `price_from=${price_from}`, + `price_to=${price_to}`, + `order_by=${order_by}` + ].join('&'); + let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?${urlParameter}`); + searchResults = searchResults.data; + + const manufacture = await apiOdoo('GET', `/api/v1/manufacture/${getIdFromSlug(slug)}`); + + return { + props: { + searchResults, + page, + slug, + category, + price_from, + price_to, + order_by, + manufacture + } + }; +} + +export default function BrandDetail({ + searchResults, + page, + slug, + category, + price_from, + price_to, + order_by, + manufacture +}) { + const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows); + const productStart = searchResults.responseHeader.params.start; + const productRows = searchResults.responseHeader.params.rows; + const productFound = searchResults.response.numFound; + + const [activeFilter, setActiveFilter] = useState(false); + const [filterCount, setFilterCount] = useState(0); + + const route = () => { + let route = `/shop/brands/${slug}`; + if (category) route += `&category=${category}`; + if (price_from) route += `&price_from=${price_from}`; + if (price_to) route += `&price_to=${price_to}`; + if (order_by) route += `&order_by=${order_by}`; + return route; + } + + useEffect(() => { + let calculateFilterCount = 0; + if (category) calculateFilterCount++; + if (price_from || price_to) calculateFilterCount++; + if (order_by) calculateFilterCount++; + setFilterCount(calculateFilterCount); + }, [category, price_from, price_to, order_by]); + + return ( + <> + <Header title={`Distributor ${getNameFromSlug(slug)} Indonesia Harga Official - Indoteknik`} /> + <Filter + defaultRoute={`/shop/brands/${slug}`} + isActive={activeFilter} + closeFilter={() => setActiveFilter(false)} + defaultPriceFrom={price_from} + defaultPriceTo={price_to} + defaultBrand='' + defaultCategory={category} + defaultOrderBy={order_by} + searchResults={searchResults} + disableFilter={['brand']} + /> + <Layout> + <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[SwiperPagination]}> + { + manufacture.banners?.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src={banner} + alt={`Banner ${manufacture.name}`} + className="w-full h-auto border-b border-gray_r-6" + /> + </SwiperSlide> + )) + } + </Swiper> + <div className="p-4 grid grid-cols-2"> + <div> + <p className="text-caption-2 text-gray_r-11 mb-2">Produk dari brand:</p> + { manufacture.logo ? ( + <div className="w-8/12"> + <Image src={manufacture?.logo} alt={manufacture.name} className="border border-gray_r-6 rounded p-3" /> + </div> + ) : ( + <p className="badge-solid-red text-caption-1">{ manufacture.name }</p> + ) } + </div> + <div className="text-right"> + <p className="text-caption-2 text-gray_r-11 mb-2">Jumlah Produk:</p> + <p>{ searchResults.response.numFound }</p> + </div> + </div> + + <LineDivider /> + + <div className="p-4"> + <h1 className="mb-2">Produk</h1> + <div className="text-caption-1 mb-4"> + {productFound > 0 ? ( + <> + Menampilkan + {pageCount > 1 ? ( + <> + {productStart + 1}-{ + (productStart + productRows) > productFound ? productFound : productStart + productRows + } + dari + </> + ) : ''} + {searchResults.response.numFound} + produk untuk brand <span className="font-semibold">{getNameFromSlug(slug)}</span> + </> + ) : 'Mungkin yang anda cari'} + </div> + <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}> + <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span> + </button> + <div className="grid grid-cols-2 gap-3"> + {searchResults.response.products.map((product) => ( + <ProductCard key={product.id} data={product} /> + ))} + </div> + + <div className="mt-4"> + <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={route()} /> + </div> + </div> + + <Footer /> + </Layout> + </> + ) +}
\ No newline at end of file |